<template>
  <demo-content :title="title">
    <p>
      除了颜色值外，也可以为 strokeStyle 与 fillStyle 属性指定渐变色与图案。
    </p>
    <h2>渐变色</h2>
    <p>Canvas 元素支持线性 (linear) 渐变与放射 (radial) 渐变。</p>
    <h3>线性渐变</h3>
    <p>
      通过调用 <code>createLinearGradient()</code> 方法之后，该方法会返回一个
      CanvasGradient 实例。最后，应用程序将改渐变色设置为 fillStyle
      属性的话，将会用此渐变色进行填充。
    </p>
    <p>
      可用通过 CanvasGradient 中唯一的方法 addColorStop
      来向渐变色中添加5个颜色停止点(color stop)，该方法接受两个参数：一个是位于
      0 ~ 1.0 之间的 double 值，代表颜色停止点在渐变线上的位置；另一个是
      DOMString 类型的 CSS3 颜色字符串值。
    </p>
    <h3>放射渐变</h3>
    <p>
      创建线性渐变时，需要指定一条渐变线。要创建放射渐变，必须指定两个圆形，它们表示圆锥的起止部位。
    </p>
    <p>
      与 createLinearGradient 方法一样，createRadialGradient 方法也返回一个
      CanvasGradient 的实例。也可以通过 addColorStop 添加颜色停止点。
    </p>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { rect, text } from "./utils";

const title = "渐变色";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  // 线性渐变
  const g1 = ctx.createLinearGradient(0, 40, 100, 100);
  g1.addColorStop(0, "blue");
  g1.addColorStop(0.25, "white");
  g1.addColorStop(0.5, "purple");
  g1.addColorStop(0.75, "red");
  g1.addColorStop(1, "yellow");
  text;
  rect.draw(ctx, {
    x: 0,
    y: 40,
    w: 100,
    h: 100,
    fillStyle: g1,
  });
  // 放射渐变
  const g2 = ctx.createRadialGradient(180, 70, 10, 180, 70, 50);
  g2.addColorStop(0, "blue");
  g2.addColorStop(0.25, "white");
  g2.addColorStop(0.5, "purple");
  g2.addColorStop(0.75, "red");
  g2.addColorStop(1, "yellow");
  rect.draw(ctx, { x: 140, y: 40, w: 100, h: 100, fillStyle: g2 });
});
</script>

<style src="./default.css" scoped></style>
